<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <div style="float: right;">
          <el-button size="small" type="primary" @click="addPermiss">添加</el-button>
          <el-button size="small" type="success" @click="editPermiss">编辑</el-button>
          <el-button size="small" type="danger" @click="removePermiss">删除</el-button>
        </div>
      </div>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:700px;">
          <el-table
            :header-cell-style="{background:'#f5f5f5'}"
            class="perTabSty"
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="permissionId"
            border
            height="680px"
            :highlight-current-row="currentRow"
            @row-click="rowColor"
            :tree-props="{children: 'childrens', hasChildren: 'hasChildren'}"
          >
            <el-table-column align="center" prop="permissionId" label="id" width="100"></el-table-column>
            <el-table-column align="center" prop="permissionName" label="权限名称"></el-table-column>
            <el-table-column align="center" prop="path" label="权限地址"></el-table-column>
            <el-table-column align="center" prop="icon" label="图标"></el-table-column>
            <el-table-column align="center" prop="sort" label="权限顺序"></el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <!-- 弹框 -->
      <el-dialog
        style="width:56%;margin-left:22%"
        title="权限配置"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        @closed="closeDialog"
      >
        <el-form label-width="95px" :model="dutyFrom" :hide-required-asterisk="false">
          <el-form-item label="上级权限：" prop="parentId">
            <el-select class="userIntSize" disabled v-model="dutyFrom.parentId" clearable>
              <el-option
                v-for="(item,index) in superPerOption"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限名称：" prop="permissionName">
            <el-input
              class="userIntSize"
              v-model="dutyFrom.permissionName"
              clearable
              placeholder="请输入权限名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限地址：" prop="path">
            <el-input class="userIntSize" v-model="dutyFrom.path" clearable placeholder="请输入权限地址"></el-input>
          </el-form-item>
          <el-form-item label="权限图标：" prop="icon">
            <el-input class="userIntSize" v-model="dutyFrom.icon" clearable placeholder="请输入权限图标"></el-input>
          </el-form-item>
          <el-form-item label="权限顺序：" prop="sort">
            <el-input class="userIntSize" v-model="dutyFrom.sort" clearable placeholder="请输入排序"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="saveBtn" type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 是否高亮当前行
      currentRow: false,
      // 弹框显示隐藏
      dialogFormVisible: false,
      // 表单数据
      dutyFrom: {
        parentId: "",
        permissionName: "",
        path: "",
        icon: "",
        sort: "",
        permissionId: "",
      },
      // 上级权限列表
      superPerOption: [],
      rowData: {},
    };
  },
  mounted() {
    this.getTabData();
  },
  methods: {
    //   获取表格数据
    getTabData() {
      this.$axios
        .post("permission/getList")
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            this.readNodes(this.tableData, this.superPerOption);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    readNodes(nodes = [], arr = []) {
      for (let item of nodes) {
        let obj = {};
        obj["id"] = item.permissionId;
        obj["name"] = item.permissionName;
        arr.push(obj);
        if (item.childrens && item.childrens.length)
          this.readNodes(item.childrens, arr);
      }
      return arr;
    },
    // 点击表格行
    rowColor(row) {
      this.currentRow = true;
      this.rowData = row;
    },
    // 添加权限
    addPermiss() {
      this.dialogFormVisible = true;
      if (this.currentRow) {
        this.dutyFrom.parentId = this.rowData.permissionId;
      }
    },
    // 编辑权限
    editPermiss() {
      if (this.currentRow) {
        this.dialogFormVisible = true;
        this.$axios
          .post(
            "permission/load",
            { permissionId: this.rowData.permissionId },
            2
          )
          .then((res) => {
            if (res.code == 200) {
              this.dutyFrom = res.data;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          message: "请先选择要操作的权限！",
          type: "warning",
        });
      }
    },
    // 删除权限
    removePermiss() {
      if (this.currentRow) {
        this.$confirm("确认删除？")
          .then((_) => {
            this.$axios
              .post(
                "permission/remove",
                {
                  permissionId: this.rowData.permissionId,
                },
                2
              )
              .then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: "删除成功",
                    type: "success",
                  });
                  this.getTabData();
                  this.currentRow = false;
                }
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((_) => {});
      } else {
        this.$message({
          message: "请先选择要操作的权限！",
          type: "warning",
        });
      }
    },
    // 新增权限
    addPerFun(data) {
      this.$axios
        .post("permission/add", data, 2)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改权限
    updataPer(data) {
      this.$axios
        .post("permission/update", data, 2)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 保存
    submitForm() {
      let obj = {
        permissionName: this.dutyFrom.permissionName,
        path: this.dutyFrom.path,
        icon: this.dutyFrom.icon,
        parentId: this.dutyFrom.parentId,
        sort: this.dutyFrom.sort,
      };
      if (this.dutyFrom.permissionId) {
        obj.permissionId = this.dutyFrom.permissionId;
        this.updataPer(obj);
      } else {
        this.addPerFun(obj);
      }
      this.dialogFormVisible = false;
    },
    // 关闭弹框
    closeDialog() {
      this.dutyFrom = {
        parentId: "",
        permissionName: "",
        path: "",
        icon: "",
        sort: "",
        permissionId: "",
      };
      this.currentRow = false;
    },
  },
};
</script>
<style scoped>
.userIntSize {
  width: 80%;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
</style>
<style>
.perTabSty .el-table__row:hover > td {
  background: #e9eeff !important;
}
</style>